<template>
  <div class="cashier-container">
    <!-- 头部标题 -->
    <div class="header">
      <button class="back-button" @click="navigateBack">返回</button>
      <span class="header-title">收银台</span>
      <div class="header-right">
        <button class="more-button" @click="showMoreOptions">•••</button>
      </div>
    </div>

    <!-- 订单信息展示 -->
    <div class="order-info" v-if="orderData.orderSn">
      <div class="info-item">
        <span class="info-label">订单号:</span>
        <span class="info-value">{{ orderData.orderSn }}</span>
      </div>
    </div>

    <!-- 订单金额信息 -->
    <div class="amount-section">
      <span class="amount-label">实付金额</span>
      <div class="amount-value">¥{{ paymentAmount }}</div>
      <span class="time-remaining">剩余支付时间 {{ remainingTime }}</span>
    </div>

    <!-- 支付方式选择 -->
    <div class="payment-methods">
      <span class="section-title">选择支付方式</span>
      <div class="method-list">
        <div class="method-item" :class="{ 'selected': selectedPaymentMethod.id === 1 }" @click="selectPaymentMethod(paymentMethods[0])">
          <div class="method-info">
            <span class="method-icon">💚💚</span>
            <span class="method-name">微信支付</span>
          </div>
          <div class="check-circle" :class="{ 'active': selectedPaymentMethod.id === 1 }"></div>
        </div>
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="bottom">
      <button class="pay-button" @click="confirmPayment" :disabled="isLoading">
        {{ isLoading ? '支付处理中...' : '立即支付 ¥' + paymentAmount }}
      </button>
    </div>

    <!-- 加载提示 -->
    <div class="loading-mask" v-if="isLoading">
      <div class="loading-content">
        <div class="loading-spinner"></div>
        <span class="loading-text">正在处理...</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 响应式数据
const paymentAmount = ref('0.00')
const remainingTime = ref('14:58')
const selectedPaymentMethod = ref({})
const isLoading = ref(false)
const countdownInterval = ref(null)
const orderData = ref({})

// 支付方式列表
const paymentMethods = ref([
  { id: 1, name: '微信支付', icon: 'wechat' }
])

// 生命周期钩子
onMounted(() => {
  // 使用Vue Router的route.query获取参数
  console.log('路由参数:', route.query)
  
  // 获取订单数据
  orderData.value = {
    orderSn: route.query.orderSn || '',
    serviceFee: route.query.serviceFee || '0.00'
  }
  
  // 设置支付金额
  paymentAmount.value = orderData.value.serviceFee
  console.log('serviceFee:', orderData.value.serviceFee)
  
  // 默认选择第一个支付方式
  selectedPaymentMethod.value = paymentMethods.value[0]
  
  // 启动倒计时
  startCountdown()
})

// 组件卸载时清除倒计时
onUnmounted(() => {
  if (countdownInterval.value) {
    clearInterval(countdownInterval.value)
  }
})

// 返回上一页
const navigateBack = () => {
  router.back()
}

// 显示更多选项
const showMoreOptions = () => {
  alert('更多选项')
}

// 选择支付方式
const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method
}

// 确认支付
const confirmPayment = () => {
  isLoading.value = true
  
  // 模拟支付过程
  setTimeout(() => {
    isLoading.value = false
    
    // 模拟支付成功
    alert('支付成功！')
    
    // 跳转到支付成功页面
    router.push('/pages/payment/success')
  }, 2000)
}

// 启动倒计时
const startCountdown = () => {
  // 这里简单模拟倒计时功能
  // 实际项目中应该根据订单的创建时间计算剩余时间
  let minutes = 14
  let seconds = 58
  
  countdownInterval.value = setInterval(() => {
    seconds--
    
    if (seconds < 0) {
      minutes--
      seconds = 59
    }
    
    if (minutes < 0) {
      clearInterval(countdownInterval.value)
      remainingTime.value = '00:00'
      alert('支付超时，请重新下单')
      router.push('/pages/payment/index')
      return
    }
    
    remainingTime.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  }, 1000)
}
</script>

<style scoped>
/* 样式保持不变 */
.cashier-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  background-color: #1890ff;
  color: white;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.back-button {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
}

.more-button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  padding: 8px;
  cursor: pointer;
}

/* 订单信息 */
.order-info {
  background-color: white;
  padding: 16px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.info-label {
  font-size: 14px;
  color: #666;
}

.info-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 金额信息区域 */
.amount-section {
  background-color: white;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 16px;
}

.amount-label {
  font-size: 16px;
  color: #666;
  display: block;
  margin-bottom: 16px;
}

.amount-value {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  display: block;
}

.time-remaining {
  font-size: 14px;
  color: #ff4d4f;
}

/* 支付方式选择 */
.payment-methods {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.method-item:hover {
  border-color: #1890ff;
  background-color: #f0f9ff;
}

.method-item.selected {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.method-info {
  display: flex;
  align-items: center;
}

.method-icon {
  font-size: 28px;
  margin-right: 16px;
}

.method-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.check-circle {
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.check-circle.active {
  border-color: #1890ff;
  background-color: #1890ff;
  transform: scale(1.1);
}

.check-circle.active::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* 底部支付按钮 */
.bottom {
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.pay-button {
  width: 100%;
  height: 52px;
  line-height: 52px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border: none;
  border-radius: 26px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.pay-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

.pay-button:active {
  transform: translateY(0);
  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
}

.pay-button:disabled {
  background: #d9d9d9;
  box-shadow: none;
  cursor: not-allowed;
}

/* 加载提示 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1890ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 12px;
}

.loading-text {
  font-size: 14px;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
  .amount-value {
    font-size: 32px;
  }
}

/* 确保在大屏幕上页面宽度符合H5标准 */
@media screen and (min-width: 768px) {
  .cashier-container {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  .header {
    max-width: 480px;
    margin: 0 auto;
    left: 0;
    right: 0;
    position: sticky;
  }
  
  .bottom {
    max-width: 480px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
}
</style>